<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../static/font/iconfont.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <!-- <link rel="stylesheet" href="../css/swiper-bundle.css"> -->
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 页头 -->
    <div id="header" class="container">
        <div class="logo">
            <a href="#"><img src="../static/images/logo.png" alt="logo"></a>
            <a href="#" class="text">
                <h2>熊猫优选</h2>
                <p>XIONG MAO YOU XUAN</p>
            </a>
        </div>
        <div class="search">
            <a href="#"><span class="iconfont icon-sousuo1"></span></a>
            <input type="text" name="search" placeholder="搜索商品，发现更多优惠">
            <input type="button" value="搜索" name="submit">
        </div>
        <div class="tag">
            <section class="user">
                欢迎你 <span></span>,<p>退出</p>
            </section>
            <div>
                <span class="iconfont icon-99yuanbaoyou"></span>
                <p>全程包邮</p>
            </div>
            <div>
                <span class="iconfont icon-tuihuanhuo"></span>
                <p>7天退换</p>
            </div>
            <div>
                <span class="iconfont icon-pinzhibaozhengQuality"></span>
                <p>品质保证</p>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <div class="container">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">电脑配件</a></li>
                <li><a href="#">时令生鲜</a></li>
                <li><a href="#">超值大额券</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航栏的导航区，有侧边导航栏，轮播，图片导航 -->
    <div id="detailnav" class="container">
        <!-- 左边导航栏 -->
        <div class="leftNav">
            <ul>
                <li><a href="#">女装</a>/<a href="#">女鞋</a></li>
                <li><a href="#">男装</a>/<a href="#">男鞋</a></li>
                <li><a href="#">美妆</a>/<a href="#">个护</a></li>
                <li><a href="#">配饰</a>/<a href="#">箱包</a></li>
                <li><a href="#">零食王国</a></li>
                <li><a href="#">母婴用品</a></li>
                <li><a href="#">手机数码</a></li>
                <li><a href="#">内衣袜子</a></li>
                <li><a href="#">文娱</a>/<a href="#">家居</a></li>
            </ul>
        </div>
        <!-- 轮播 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- 商品展示导航栏 -->
        <div class="rightNav">
            <ul>
                <li><a href="#"><img src="../static/images/computer.jpg" alt=""></a></li>
                <li><a href="#"><img src="../static/images/freshfood.jpg" alt=""></a></li>
                <li><a href="#"><img src="../static/images/discount.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- 商品列表区 -->
    <div id="product" class="container">
        <h1>为你推荐</h1>
        <div class="productList">
            <!-- 动态加载-->
        </div>
        <div class="getMore">
            <button>查看更多</button>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            Copyright&copy;2006-2016 UP72 Corporation All RightsReserved.
            <br>
            北京开拓明天股份有限公司京ICP备10010204号京公网安备110108003386号
        </div>
    </div>
    <!-- 回到顶部 -->
    <div id="toTop">
        <span class="iconfont icon-huidaodingbu"></span>
        <p>顶部</p>
    </div>

    <!-- js -->
    <script src="../js/jquery-3.6.0.js"></script>
    <!-- <script src="../js/swiper-bundle.js"></script> -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script src="../js/index.js"></script>

</body>

</html>